{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/layui/layui.js"></script>

{% endblock %}
{% block content %}
    <div class="contents" style="margin: 40px;background-color: #191C24 !important;height: 80%">
        <div class="grid_wrapper" style="padding: 50px">
            <div class="g_12 separator"><span></span></div>
            <div style="clear: both"></div>
            <div style="margin-left: 20%">
                <div class="layui-upload-drag" id="test10">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <div class="layui-hide" id="uploadDemoView">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                    </div>
                </div>
                <div style="clear: both"></div>
                <button type="button" class="layui-btn" id="classify" style="margin: 20px 15%">开始识别</button>
            </div>

        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
    var file_name;
        layui.use(['layer', 'form', 'upload'], function () {
            var layer = layui.layer
            var upload = layui.upload;
            //拖拽上传
            upload.render({
                elem: '#test10'
                , url: '/upload_file' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                 ,choose: function (obj) {
                    let files = obj.pushFile()
                    console.log(files)
                    for (let item in files) {
                      file_name=files[item].name //显示文件名
                    }


                }
                , done: function (res) {
                    layer.msg('上传成功');
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.path);
                    console.log(res)
                }
            });
            $(function () {
                $("#classify").click(function () {
                    var loading = layer.msg("正在为您识别图片，请稍后...", {icon: 16, shade: [0.3, "gray"], time: false});
                    if ("" == file_name || undefined == file_name) {
                        layer.msg("图片不能为空", {icon: 7});
                        return
                    }
                    $.ajax({
                        type: 'POST',
                        url: "/shibie",
                        dataType: 'json', //服务端返回json格式的数据
                        data: {'file_name': file_name},

                        success: function (data) { // 这里的data就是返回的json格式的数据
                            layer.close(loading)
                            var value = data.is_edit
                            layer.confirm('是否篡改过：'+value , {icon: 6, title: '识别结果'}, function (index) {
                                layer.close(index)
                            })

                        },
                        error: function (xhr, type) {
                            if (xhr.status == 505) {
                                layer.msg('识别失败，请查看后台', {icon: 5})
                            }
                        }
                    });

                })
            })
        })
    </script>
{% endblock %}